import React, { useEffect, useRef } from 'react';
import './index.scss';

export default function StreamPlayer(props) {

  const { stream, domId } = props;
  const player = useRef();

  useEffect(() => {
    if (stream && !stream.isPlaying()) {
      stream.play(`${domId}`, { fit: 'cover' }, (err) => {
        if (err && err.status !== 'aborted') {
          console.log('trigger autoplay policy')
        }
      })
    }

    return () => {
      if (stream) {
        if (stream.isPlaying()) {
          stream.stop()
        }
        stream.close()
      }
    }
  }, [])

  return (<div className="agora-video-player" ref={player} id={domId}></div>)
}